<template>
  <div class="login flex-center">
    <div class="panel">
      <div class="login-left">
        <el-image :src="left"/>
      </div>
      <div class="login-form">
        <div class="login-logo">
          <el-image class="login-icon" :src="logo"/>
          <h2 class="login-text">WMS System</h2>
        </div>
        <el-form :model="form" :rules="rules" ref="formRef" label-position="top">
          <el-form-item label="账号" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入账号" prefix-icon="user"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" prefix-icon="lock"/>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" @click="handleSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import { FormInstance, FormRules} from "element-plus";
import {LoginRequest} from "@/interface/auth";
import useUserStore from "@/store/user";
import {useRouter} from "vue-router";

import left from "@/assets/login_left.png"
import logo from '@/assets/vue.svg'

const router = useRouter()
const form = ref<LoginRequest>({
  name: 'admin',
  password: '111111'
})



const rules = reactive<FormRules>({
  name: [
    {required: true, message: '必填', type: "string", trigger: ['blur', 'change']}
  ],
  password: [
    {required: true, message: '必填', type: "string", trigger: ['blur', 'change']}
  ],
})

//表单校验
const formRef = ref<FormInstance>()

//实例化store
const userStore = useUserStore()

const handleSubmit = ()=> {
   formRef.value?.validate((isValid) => {
     if (!isValid) {
       return
     }

     //登录请求
     userStore.login(form.value).then(()=> {
       console.log('登录状态：', userStore.isLogin)
       if(userStore.isLogin){
           router.push({path:'/dashboard'})
       }
     })
   })
}



</script>
<style scoped>
.login{
  width: 100%;
  height: 100%;
  /*min-width: 1600px;*/
  min-height: 550px;
  background: url("@/assets/login_background.jpg") no-repeat;
  background-size: cover;
}

.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

/*

.panel{
  position: absolute;
  width: 96vw;
  height: 94vh;
  top: 3vh;
  left: 2vw;
  display: flex;
  !*justify-content: center;*!
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(255,255,255, 0.8);
  border-radius: 10px;
}
*/

.panel{
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 96%;
  height: 94%;
  background-color: rgba(255,255,255, 0.8);
  border-radius: 10px;
}


.login-left{
  width: 800px;
}
@media screen and (max-width: 1250px) {
  .login-left {
    display: none;
  }
}

.login-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 45px;
}
.login-icon{
  width: 80px;
  height: 80px;
}
.login-text{
  font-size: 42px;
  font-weight: 700;
  color: #34495e;
  white-space: nowrap;
}

.login-form{
  width: 400px;
  padding: 50px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 2px 3px 7px #0003;
}

</style>
